<template>
	<view :id="id">
		<slot></slot>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: "unitvPage",
		inject: ['pageId','pageState'],
		props: {
			id: {// Zone Id
				type: String,
				required: true
			},
			up: {// Zone切换时上一Zone Id
				type: String
			},
			down: {// Zone切换时下一Zone Id
				type: String
			},
			left: {// Zone切换时左一Zone Id
				type: String
			},
			right: {// Zone切换时右一Zone Id
				type: String
			},
			item: {// Zone当前焦点item索引
				type: Number,
				default: 0
			},
			prevZone: {// Zone改变后的上一个Zone Id
				type: String
			},
			row: {// Zone的item总行数
				type: Number,
				default: 1
			},
			column: {// Zone的item总列数
				type: Number,
				default: 0
			},
			defaultBehavior:{
				type: Boolean,
				default:true
			},
			autoFous:{
				type: Boolean,
				default:false
			},
			values:{
				 type: Array,
				 default: () => []
			}
		},
		provide() {
			return {
				zoneId: this.id,
				zoneState:this.zoneState,
				zoneItems:this.items
			}
		},
		created() {
			//console.log(this.pageId)
			if(this.autoFous){
				this.pageState.curZoneId=this.id;
				this.zoneState.curZone=true;
				this.focus=true;
				this.switchZone(this);
			}
			this._switchItem(this.item);
			this.currentPage.pushZone(this);
		},
		mounted(){
			
		},
		computed: {
			...mapState(['currentZone','currentPage'])
		},
		data() {
		return {
			citem:0,
			crow:0,// Zone的当前行
			prevItem:0,// item改变后的上一item索引
			focus:false,
			items:[],// Zone的所有item数组集合
			zoneState:{
				curItem:this.citem,
				curZone:this.focus,
				curScroll:null
			},
			StepSeq:0
		}},
		methods: {
			...mapMutations(['switchZone']),
			_switchItem:function(item){
				this.citem=item;
				this.zoneState.curItem=item;
			},
			evtArrow:function(Arrow){
				var self=this;
				//this._switchItem(this.citem+1);
				 var item = this.citem || 0;
				var steps = this.row * this.column;
				var Row = Math.floor(item/this.column);
				var Border = this[Arrow];
				var cRow = this.crow;
				switch(Arrow){
				        case 'left':
				            item -= 1;
				            if (Math.floor(item / this.column) != Row) {
				                item = item - steps;
				            }
				            break;
				        case 'right':
				            item += 1;
				            if (Math.floor(item / this.column) != Row) {
				                item = item + steps;
				            }
				            break;
				        case 'up':
				            item -= this.column;
				            this.crow = cRow - 1;
				            break;
				        case 'down':
				            item += this.column;
				            this.crow = cRow + 1;
				            break;
				    };
				
				    if(item >=0 && item <= steps-1){
				        if (item+this.StepSeq*steps+1 > this.values.length) {
				            item = this.values.length-this.StepSeq*steps-1;
				        }
				        this.citem = item;
				       // keyController.defaultChangeItem(CurrentPage,CurrentZone,CurrentPage,CurrentZone);
				        this._switchItem(this.citem);
				    } else{
				        this.crow = cRow;
				        OverBorder();
				    };
				    function OverBorder(){
				        if(Border){
				            if(Border === self.id){
				                ScrollItem();
				            }else{
				                ChangeZone();
				            }
				        } ;
				        function ScrollItem(){
				            switch (Arrow){
				                case 'up':
				                    item = self.citem + self.column*(self.row-1);
				                    self.crow = self.row-1;
				                    break
				                case 'down':
				                    item = self.citem - self.column*(self.row-1);
				                    self.crow = 0;
				                    break
				                case 'left':
				                    item = (Row+1)*self.column - 1;
				                    break
				                case 'right':
				                    item = Row*self.column;
				                    break
				            };
				            //当前焦点区域对应的数值的个数超过一屏的显示个数，产生翻页效果
				            if (self.values.length > steps) {
				                self.StepSeq = self.StepSeq || 0;
				                var MaxSeq = Math.ceil(self.values.length/steps)-1;
				                if ((Arrow === 'left') || (Arrow === 'up')){
				                    //左键或者上键，往前翻
				                   self.StepSeq = (self.StepSeq>0)?self.StepSeq-1:MaxSeq;
				                } else if ((Arrow === 'right') || (Arrow === 'down')) {
				                    //右键或者下键，往后翻
				                    self.StepSeq = (self.StepSeq<MaxSeq)?self.StepSeq+1:0;
				                };
				            };
				            //数值个数不够时，光标定位在第一个上面
				            if (item+self.StepSeq*steps+1 > self.values.length) {
				                item = 0;
				            }
				            self.citem = item;
				            //执行用户定义函数
				            self._switchItem(self.citem);
				        };
				        function ChangeZone(){
							self.currentPage.ChangeZone(Border);
				            // PrevPage = CurrentPage;
				            // PrevZone = CurrentZone;
				            // CurrentZone = CurrentPage.Zone[Border];
				            // mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].item = mtv.frw.Page[CurrentPage.id].Zone[CurrentZone.id].item || 0;
				            // mtv.frw.Page[ .id].currentZoneId = CurrentZone.id;
				            // keyController.defaultChangeItem(PrevPage,PrevZone,CurrentPage,CurrentZone);
				            // //执行用户定义函数
				            // keyController.onChangeZone(Arrow);
				        };
				
				    };
				
			},
			evtEnter:function(){
				var itemObj=this.items[this.citem];
				if(itemObj){
					itemObj.handleClick();
				}
			}
		},
		watch: {}
	}
</script>

<style scoped>
</style>